import 'package:fate_blind_box/network/Api.dart';
import 'package:fate_blind_box/theme/theme_color.dart';
import 'package:fate_blind_box/ui/Home/fate/fate_fail.dart';
import 'package:fate_blind_box/utils/provider.dart';
import 'package:fate_blind_box/widget/icon_text.dart';
import 'package:flutter/material.dart';

import 'fate_success.dart';


class FateListUi extends StatelessWidget {
  const FateListUi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const _FateListState();
  }
}

class _FateListState extends StatefulWidget {
  const _FateListState({Key? key}) : super(key: key);

  @override
  State<_FateListState> createState() => _FateListStateState();
}

class _FateListStateState extends State<_FateListState> {

  late ScrollController _scrollController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels > _scrollController.position.maxScrollExtent - 20) {
        _pageNum++;
        _getMembers();
      }
    });
    _getMembers();
  }

  Future<void> _onRefresh() async {
    _pageNum = 1;
    await _getMembers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: buildAppBar(),
      body: Column(
        children: [
          // buildTimer(),
          Expanded(child: buildList())
        ],
      ),
    );
  }

  AppBar buildAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      title: Text(
        "月老牵线",
        style: TextStyle(color: ThemeColor.textColor, fontSize: 16),
      ),
      elevation: 0,
      centerTitle: true,
      actions: [
        GestureDetector(
            onTap: () {

            },
            child: Container(
              width: 56,
              height: 56,
              alignment: Alignment.center,
              child: Text(
                "",//""分享",
                style: TextStyle(
                    color: ThemeColor.textColor
                ),
              ),
            )
        )
      ],
    );
  }

  Widget buildTimer() {
    return Container(
      height: 48,
      alignment: Alignment.center,
      child: Text(
        "倒计时：00分23秒",
        style: TextStyle(
          fontSize: 14,
          color: ThemeColor.mainColor
        ),
      ),
    );
  }

  Widget buildList() {
    return RefreshIndicator(
      onRefresh: _onRefresh,
      child: ListView.builder(
        controller: _scrollController,
        itemCount: _list.length,
        shrinkWrap: true,
        padding: const EdgeInsets.all(15),
        itemBuilder: (BuildContext context, int index) {
          // return ListTile(title: Text('$index'));
          return buildListItem(index);
        },
      ),
    );
  }

  Widget buildListItem(int index) {
    return Container(
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: ThemeColor.dividerColor,
            width: 1
          )
        )
      ),
      child: Stack(
        children: [
          ClipOval(
            child: Image.network(
              "https://pic3.zhimg.com/v2-58d652598269710fa67ec8d1c88d8f03_r.jpg?source=1940ef5c",
              width: 40,
              height: 40,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            left: 48,
            child: Text(
              "这是一个昵称",
              style: TextStyle(
                color: ThemeColor.textColor,
                fontSize: 15
              ),
            ),
          ),
          Positioned(
            left: 48,
            bottom: 0,
            child: Row(
              children: [
                Text(
                  "城市名称",
                  style: TextStyle(
                    color: ThemeColor.textColorSecond,
                    fontSize: 12,
                  ),
                ),
                Container(
                  decoration: ShapeDecoration(
                    color: ThemeColor.mainColor,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12)
                    )
                  ),
                  margin: const EdgeInsets.only(left: 8),
                  padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
                  child: const IconText(
                    "25",
                    iconSize: 12,
                    icon: Icon(
                      Icons.male,
                      color: Colors.white,
                      size: 12,
                    ),
                    style: TextStyle(
                      fontSize: 10,
                      color: Colors.white
                    ),
                  ),
                )
              ],
            ),
          ),
          Positioned(
            child: GestureDetector(
              onTap: () {
                showFailDialog(index);
              },
              child: Image.asset(
                "images/ic_dxc.png",
                height: 21,
                width: 30,
              ),
            ),
            right: 0,
            top: 10,
          )
        ],
      ),
    );
  }



  showFailDialog(int position) {
    if (position % 2 == 0) {
      showDialog(context: context, builder: (context) {
        return const FateFailUi();
      });
    } else {
      Navigator.of(context).push(MaterialPageRoute(builder: (ctx) => const FateSuccessUi()));
    }
  }

  int _pageNum = 1;
  List<dynamic> _list = [];
  _getMembers() async {
    final res = await Api.getInstance().fateLineMembers(Provider.memberId, 20, _pageNum);
    if (res['data'] == null) {
      return;
    }
    if (res['data']['list'] == null) {
      return;
    }
    List resList = res['data']['list'];
    if (resList.isEmpty) {
      return;
    }
    if (_pageNum <= 1) {
      _list.clear();
    }
    setState(() {
      _list.addAll(resList);
    });
  }
}

